<template>
  <div class="dashboard-container" id="myPrint">
    <div class="app-container">
      <el-card>
        <el-breadcrumb separator="/" class="titInfo ">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>
            <router-link :to="{ path: '/employees' }">员工管理</router-link>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span v-print="printObj">打印</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <div id="myprint">
          <div v-if="type === 'info'">
            <h2 class="centInfo">员工信息表</h2>
            <table cellspacing="0" width="100%" class="tableList">
              <tr class="title">
                <td colspan="8" class="centInfo">基本信息</td>
              </tr>
              <tr>
                <th style="width:10%">姓名</th>
                <td colspan="6" style="width:80%">{{ userInfo.username }}</td>
                <td rowspan="5" style="width:10%">
                  <img
                    style="width:155px;height:218px"
                    :src="userInfo.staffPhoto"
                  />
                </td>
              </tr>
              <tr>
                <th>性别</th>
                <td colspan="6">{{ userInfo.sex }}</td>
              </tr>
              <tr>
                <th>手机</th>
                <td colspan="6">{{ userInfo.mobile }}</td>
              </tr>
              <tr>
                <th>出生日期</th>
                <td colspan="6">{{ userInfo.dateOfBirth | myFormat }}</td>
              </tr>
              <tr>
                <th>最高学历</th>
                <td colspan="6">{{ userInfo.theHighestDegreeOfEducation }}</td>
              </tr>
              <tr>
                <th style="width:10%">是否可编辑</th>
                <td style="width:35%">{{ userInfo.isItEditable }}</td>
                <th style="width:10%">是否隐藏号码</th>
                <td colspan="5" style="width:45%">
                  {{ userInfo.doYouHideNumbers }}
                </td>
              </tr>
              <tr>
                <th>国家地区</th>
                <td>{{ userInfo.nationalArea }}</td>
                <th>护照号</th>
                <td colspan="5">{{ userInfo.passportNo }}</td>
              </tr>
              <tr>
                <th>身份证号</th>
                <td>{{ userInfo.idNumber }}</td>
                <th>身份证照片</th>
                <td colspan="5">{{ userInfo.iDCardPhoto }}</td>
              </tr>
              <tr>
                <th>籍贯</th>
                <td>{{ userInfo.nativePlace }}</td>
                <th>民族</th>
                <td colspan="5">{{ userInfo.nation }}</td>
              </tr>
              <tr>
                <th>英文名</th>
                <td>{{ userInfo.englishName }}</td>
                <th>婚姻状况</th>
                <td colspan="5">{{ userInfo.maritalStatus }}</td>
              </tr>
              <tr>
                <th>员工照片</th>
                <td>{{ userInfo.staffPhoto }}</td>
                <th>生日</th>
                <td colspan="5">{{ userInfo.birthday }}</td>
              </tr>
              <tr>
                <th>属相</th>
                <td>{{ userInfo.zodiac }}</td>
                <th>年龄</th>
                <td colspan="5">{{ userInfo.age }}</td>
              </tr>
              <tr>
                <th>星座</th>
                <td>{{ userInfo.constellation }}</td>
                <th>血型</th>
                <td colspan="5">{{ userInfo.bloodType }}</td>
              </tr>
              <tr>
                <th>户籍所在地</th>
                <td>{{ userInfo.domicile }}</td>
                <th>政治面貌</th>
                <td colspan="5">{{ userInfo.politicalOutlook }}</td>
              </tr>
              <tr>
                <th>入党时间</th>
                <td>{{ userInfo.timeToJoinTheParty }}</td>
                <th>存档机构</th>
                <td colspan="5">{{ userInfo.archivingOrganization }}</td>
              </tr>
              <tr>
                <th>子女状态</th>
                <td>{{ userInfo.stateOfChildren }}</td>
                <th>子女有无商业保险</th>
                <td colspan="5">
                  {{ userInfo.doChildrenHaveCommercialInsurance }}
                </td>
              </tr>
              <tr>
                <th>有无违法违纪行为</th>
                <td>{{ userInfo.isThereAnyViolationOfLawOrDiscipline }}</td>
                <th>有无重大病史</th>
                <td colspan="5">
                  {{ userInfo.areThereAnyMajorMedicalHistories }}
                </td>
              </tr>
              <tr class="title">
                <td colspan="8" class="centInfo">通讯信息</td>
              </tr>
              <tr>
                <th>QQ</th>
                <td>{{ userInfo.qQ }}</td>
                <th>微信</th>
                <td colspan="5">{{ userInfo.weChat }}</td>
              </tr>
              <tr>
                <th>居住证城市</th>
                <td>{{ userInfo.residenceCardCity }}</td>
                <th>居住证办理日期</th>
                <td colspan="5">{{ userInfo.dateOfResidencePermit }}</td>
              </tr>
              <tr>
                <th>居住证截止日期</th>
                <td>{{ userInfo.residencePermitDeadline }}</td>
                <th>现居住地</th>
                <td colspan="5">{{ userInfo.placeOfResidence }}</td>
              </tr>
              <tr>
                <th>通讯地址</th>
                <td>{{ userInfo.postalAddress }}</td>
                <th>联系手机</th>
                <td colspan="5">{{ userInfo.contactTheMobilePhone }}</td>
              </tr>
              <tr>
                <th>个人邮箱</th>
                <td>{{ userInfo.personalMailbox }}</td>
                <th>紧急联系人</th>
                <td colspan="5">{{ userInfo.emergencyContact }}</td>
              </tr>
              <tr>
                <th>紧急联系电话</th>
                <td colspan="7">{{ userInfo.emergencyContactNumber }}</td>
              </tr>
              <tr class="title">
                <td colspan="8" class="centInfo">账号信息</td>
              </tr>
              <tr>
                <th>社保电脑号</th>
                <td>{{ userInfo.socialSecurityComputerNumber }}</td>
                <th>公积金账号</th>
                <td colspan="5">{{ userInfo.providentFundAccount }}</td>
              </tr>
              <tr>
                <th>银行卡号</th>
                <td>{{ userInfo.bankCardNumber }}</td>
                <th>开户行</th>
                <td colspan="5">{{ userInfo.openingBank }}</td>
              </tr>
              <tr class="title">
                <td colspan="8" class="centInfo">教育信息</td>
              </tr>
              <tr>
                <th>学历类型</th>
                <td>{{ userInfo.educationalType }}</td>
                <th>毕业学校</th>
                <td colspan="5">{{ userInfo.graduateSchool }}</td>
              </tr>
              <tr>
                <th>入学时间</th>
                <td>{{ userInfo.enrolmentTime }}</td>
                <th>毕业时间</th>
                <td colspan="5">{{ userInfo.graduationTime }}</td>
              </tr>
              <tr>
                <th>专业</th>
                <td>{{ userInfo.major }}</td>
                <th>毕业证书</th>
                <td colspan="5">{{ userInfo.graduationCertificate }}</td>
              </tr>
              <tr>
                <th>学位证书</th>
                <td colspan="7">{{ userInfo.certificateOfAcademicDegree }}</td>
              </tr>
              <tr class="title">
                <td colspan="8" class="centInfo">从业信息</td>
              </tr>
              <tr>
                <th>上家公司</th>
                <td>{{ userInfo.homeCompany }}</td>
                <th>职称</th>
                <td colspan="5">{{ userInfo.title }}</td>
              </tr>
              <tr>
                <th>简历</th>
                <td>{{ userInfo.resume }}</td>
                <th>有无竞业限制</th>
                <td colspan="5">
                  {{ userInfo.isThereAnyCompetitionRestriction }}
                </td>
              </tr>
              <tr>
                <th>前公司离职证明</th>
                <td>{{ userInfo.proofOfDepartureOfFormerCompany }}</td>
                <th>备注</th>
                <td colspan="5">{{ userInfo.remarks }}</td>
              </tr>
            </table>
            <div class="foot">签字：___________日期:___________</div>
          </div>
          <div v-else>
            <h2 class="centInfo">岗位信息表</h2>
            <table cellspacing="0" width="100%" class="tableList">
              <tr class="title">
                <td colspan="4" class="centInfo">基本信息</td>
              </tr>
              <tr>
                <th style="width:10%">姓名</th>
                <td style="width:40%">{{ userInfo.username }}</td>
                <th style="width:10%">入职日期</th>
                <td style="width:40%">{{ userInfo.dateOfEntry }}</td>
              </tr>
              <tr>
                <th>部门</th>
                <td>{{ userInfo.departmentName }}</td>
                <th>岗位</th>
                <td>{{ userInfo.post }}</td>
              </tr>
              <tr>
                <th>工作邮箱</th>
                <td>{{ userInfo.workMailbox }}</td>
                <th>工号</th>
                <td>{{ userInfo.workNumber }}</td>
              </tr>
              <tr>
                <th>转正日期</th>
                <td>{{ userInfo.dateOfCorrection }}</td>
                <th>转正状态</th>
                <td>{{ userInfo.stateOfCorrection }}</td>
              </tr>
              <tr>
                <th>职级</th>
                <td>{{ userInfo.rank }}</td>
                <th>汇报对象</th>
                <td>{{ userInfo.reportName }}</td>
              </tr>
              <tr>
                <th>HRBP</th>
                <td>{{ userInfo.hRBP }}</td>
                <th>聘用形式</th>
                <td>{{ userInfo.formOfEmployment }}</td>
              </tr>

              <tr>
                <th>管理形式</th>
                <td>{{ userInfo.formOfManagement }}</td>
                <th>调整司龄</th>
                <td>{{ userInfo.adjustmentAgedays }}</td>
              </tr>
              <tr>
                <th>司龄</th>
                <td>{{ userInfo.ageOfDivision }}</td>
                <th>首次参加工作时间</th>
                <td>{{ userInfo.workingTimeForTheFirstTime }}</td>
              </tr>

              <tr>
                <th>调整工龄天</th>
                <td>{{ userInfo.adjustmentOfLengthOfService }}</td>
                <th>工龄</th>
                <td>{{ userInfo.workingYears }}</td>
              </tr>
              <tr>
                <th>纳税城市</th>
                <td>{{ userInfo.taxableCity }}</td>
                <th>转正评价</th>
                <td>{{ userInfo.correctionEvaluation }}</td>
              </tr>
              <tr class="title">
                <td colspan="4" class="centInfo">合同信息</td>
              </tr>
              <tr>
                <th>首次合同开始时间</th>
                <td>{{ userInfo.initialContractStartTime }}</td>
                <th>首次合同结束时间</th>
                <td>{{ userInfo.firstContractTerminationTime }}</td>
              </tr>
              <tr>
                <th>现合同开始时间</th>
                <td>{{ userInfo.currentContractStartTime }}</td>
                <th>现合同结束时间</th>
                <td>{{ userInfo.closingTimeOfCurrentContract }}</td>
              </tr>

              <tr>
                <th>合同期限</th>
                <td>{{ userInfo.contractPeriod }}</td>
                <th>合同文件</th>
                <td>{{ userInfo.contractDocuments }}</td>
              </tr>
              <tr>
                <th>续签次数</th>
                <td colspan="3">{{ userInfo.renewalNumber }}</td>
              </tr>
              <tr class="title">
                <td colspan="4" class="centInfo">招聘信息</td>
              </tr>
              <tr>
                <th>其他招聘渠道</th>
                <td>{{ userInfo.otherRecruitmentChannels }}</td>
                <th>招聘渠道</th>
                <td>{{ userInfo.recruitmentChannels }}</td>
              </tr>
              <tr>
                <th>社招校招</th>
                <td>{{ userInfo.socialRecruitment }}</td>
                <th>推荐企业人</th>
                <td>{{ userInfo.recommenderBusinessPeople }}</td>
              </tr>
            </table>
            <div class="foot">签字：___________日期:___________</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserInfoApi, getJobInfoApi } from '@/api/employees'
export default {
  data () {
    return {
      userInfo: {},
      userId: this.$route.params.id, // 用户 id
      type: this.$route.query.type, // 打印类型
      printObj: {
        id: 'myprint',
        popTitle: '打印模板'
      }
    }
  },
  // 创建完毕状态
  created () {
    // console.log(this.type)
    this.type === 'info' ? this.getPersonalDetail() : this.getJobDetail()
  },
  // 组件更新
  methods: {
    // 得到员工信息
    async getPersonalDetail () {
      const res = await getUserInfoApi(this.userId)
      // console.log(res);
      this.userInfo = res.data
    },
    // 得到岗位信息
    async getJobDetail () {
      const res = await getJobInfoApi(this.userId)
      // console.log(res);
      this.userInfo = res.data
    }
  }
}
</script>

<style lang="scss">
.foot {
  padding: 30px 0;
  text-align: right;
}
</style>
